<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>匿名拍卖</title>
    <link rel="icon" href="./images/gongzhenglogo.png">

    <style>
        body { 
            font-family: "微软雅黑", Arial, sans-serif; 
            background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
            margin: 0;
            padding: 0;
        }
        .container {
            width: 440px;
            margin: 50px auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 24px #b0c4de;
            padding: 30px 30px 20px 30px;
        }
        .title {
            text-align: center;
            font-size: 2.2em;
            font-weight: bold;
            color: #388e3c;
            margin-bottom: 10px;
            letter-spacing: 2px;
        }
        .rules {
            background: #f0f8ff;
            border-left: 4px solid #4CAF50;
            padding: 12px 18px;
            border-radius: 6px;
            margin-bottom: 25px;
            color: #333;
            font-size: 1em;
        }
        .chat-container { 
            width: 100%; 
            background: #fff; 
            border-radius: 8px; 
            box-shadow: none; 
            padding: 0; 
        }
        .history { 
            height: 260px; 
            overflow-y: auto; 
            border: 1px solid #eee; 
            border-radius: 4px; 
            padding: 12px; 
            margin-bottom: 15px; 
            background: #fafafa;
            font-size: 1.05em;
        }
        .input-area { 
            display: flex; 
        }
        .input-area input { 
            flex: 1; 
            padding: 10px; 
            border: 1px solid #b0c4de; 
            border-radius: 4px; 
            font-size: 1em;
            outline: none;
            transition: border 0.2s;
        }
        .input-area input:focus {
            border: 1.5px solid #4CAF50;
        }
        .input-area button { 
            margin-left: 10px; 
            padding: 10px 24px; 
            border: none; 
            background: #4CAF50; 
            color: #fff; 
            border-radius: 4px; 
            cursor: pointer; 
            font-size: 1em;
            transition: background 0.2s;
        }
        .input-area button:hover { 
            background: #388e3c; 
        }
        .msg { 
            margin-bottom: 10px; 
            padding: 6px 12px;
            border-radius: 6px;
            display: inline-block;
            max-width: 80%;
            word-break: break-all;
            background: #e8f5e9;
        }
        .msg.me { 
            text-align: right; 
            color: #388e3c; 
            background: #c8e6c9;
            float: right;
            clear: both;
        }
        .msg.other { 
            text-align: left; 
            color: #333; 
            background: #f1f8e9;
            float: left;
            clear: both;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="title">匿名拍卖</div>
    <div class="rules">
        <strong>拍卖规则：</strong><br>
        1. 所有用户均为匿名身份参与拍卖。<br>
        2. 请在下方输入框输入您的出价或消息，点击“发送”即可提交。<br>
        3. 所有历史消息会实时展示，便于参考。<br>
        4. 请遵守公平、公正、公开的原则，严禁恶意竞价和违规行为。
    </div>
    <div class="chat-container">
        <div class="history" id="history"></div>
        <div class="input-area">
            <input type="text" id="messageInput" placeholder="输入您的出价或消息..." />
            <button onclick="sendMessage()">发送</button>
        </div>
    </div>
</div>
<script>
    // 获取历史消息
    function loadHistory() {
        fetch('http://localhost:8080/api/tcp/history')
            .then(response => response.json())
            .then(data => {
                const historyDiv = document.getElementById('history');
                historyDiv.innerHTML = '';
                (data || []).forEach(msg => {
                    historyDiv.innerHTML += `<div class="msg">${msg}</div><div style="clear:both"></div>`;
                });
                historyDiv.scrollTop = historyDiv.scrollHeight;
            })
            .catch(() => {
                document.getElementById('history').innerHTML = '<div style="color:red;">无法加载历史消息</div>';
            });
    }

    // 发送消息
    function sendMessage() {
        const input = document.getElementById('messageInput');
        const msg = input.value.trim();
        if (!msg) return;
        fetch('http://localhost:8080/api/tcp/send?message=' + encodeURIComponent(msg), {
            method: 'POST'
        })
        .then(response => response.json())
        .then(data => {
            const historyDiv = document.getElementById('history');
            historyDiv.innerHTML = '';
            (data || []).forEach(msg => {
                historyDiv.innerHTML += `<div class="msg">${msg}</div><div style="clear:both"></div>`;
            });
            historyDiv.scrollTop = historyDiv.scrollHeight;
            input.value = '';
        })
        .catch(() => {
            alert('消息发送失败');
        });
    }

    // 回车发送
    document.getElementById('messageInput').addEventListener('keydown', function(e) {
        if (e.key === 'Enter') sendMessage();
    });

    // 初始加载历史消息
    loadHistory();

    // 每5秒自动刷新一次历史消息
    setInterval(loadHistory, 500);
</script>
</body>
</html>